<template>
  <section class="pt-120 pb-150">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <!-- actives details inner -->
          <div class="blog-details-inner">
            <!-- single actives inner -->
            <div class="single-blog-inner">
              <!-- actives image -->
              <viewer>
                <div class="post-image">
                  <img :src="articleInfo.img" alt="">
                </div>
              </viewer>
              <div class="post-content">
                <div class="post-details">
                  <div class="post-title">
                    <h3>
                      <nuxt-link to="/active-details">{{ articleInfo.title }}</nuxt-link>
                    </h3>
                  </div>
                  <p v-html="articleInfo.atext"></p>
                  <!--                  <p class="mb-0">-->
                </div>
              </div>
            </div>
            <div class="post-tag-share d-flex align-items-center">
              <div class="post-tag">
                <h5>主题:</h5>
                <a style="margin-bottom: .5rem" href="#">{{ articleInfo.tcategory }}</a>
              </div>
            </div>
          </div>
          <!-- Ennd of actives details inner -->
        </div>

        <div class="col-lg-4">
          <aside>
            <div class="single-sidebar-widget mb-30">
            </div>

            <div class="single-sidebar-widget mb-30">
              <div class="sidebar-title">
                <h5>招新海报</h5>
              </div>
              <viewer>
                <div class="sidebar-body latest-post">
                  <ul>
                    <img src="../static/assets/img/actives/poster.jpg" alt="">
                  </ul>
                </div>
              </viewer>
            </div>
            <div class="single-sidebar-widget mb-30">
              <div class="sidebar-title">
                <h5>其他活动</h5>
              </div>

              <div class="sidebar-body categories-inner">
                <ul>
                  <li v-for="(item,index) in dataList"
                      :key="index"
                      style="overflow: hidden;white-space: nowrap; text-overflow: ellipsis;"
                      @click="getToArticle(item.id)">{{ item.title }}
                  </li>
                </ul>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import {Api} from "@/request/Api";
import Viewer from "v-viewer";

Viewer.setDefaults({
  Options: {
    'inline': true,
    'button': false,
    'navbar': true,
    'title': false,
    'toolbar': false,
    'tooltip': true,
    'movable': true,
    'zoomable': true,
    'rotatable': true,
    'scalable': true,
    'transition': true,
    'fullscreen': true,
    'keyboard': true,
    'url': 'data-source'
  }
})
export default {
  name: "ActiveDetails",
  data() {
    return {
      //其他活动数据
      dataList: [],
      currentPage: 1,
      pageSize: 6,
      articleInfo: {},
      id: 0,
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getArticleDetail()
  },
  methods: {
    //跳转指定文章                                               ·
    getToArticle(id) {
      this.id = id
      this.getArticleDetail()
    },
    async getArticleDetail() {
      let data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      let res = await Api.getArticleDetail(this.id)
      this.articleInfo = res.data.articleInfo
      const result = await Api.getArticleList(data)
      console.log(result)
      if (result.code === 200) {
        //获取对应页数的内容
        this.dataList = result.data.articleInfo.records
      }
    }
  },

}
</script>

<style scoped>
li {
  cursor: pointer;
}

li:hover {
  color: #007bff;
}
</style>
